/* layout */
/* 皮肤颜色 */

.theme{

    background: url(../img/header/bg.png);
    color:#fff;

}
.skin{
    background: #01060c;
}
.skin2{
    background: rgba(9,73,109,0.25);
}

/* 头部 */
.header{
    width: 1920px;
    height: 66px;
    line-height: 66px;
    text-align: center;

}

.header-border{
    border-bottom:1px solid #1b1f25;
}

.nav-list{
    width: 684px;
    height: 100%;
}

.nav-item{
    width: calc(100% / 3);
}

.nav--active{
    background: url(../img/header/topnav_bg.png);
}

.nav-list a{
    font-size: 18px;
    color:#b0e9fe;
}

.right-bar a{
    width: 32px;
    height: 32px;
    display:block;
    background:url(../img/header/top_icon.png) no-repeat;
}

.right-bar-time{
    color:#b0e9fe;
    font-size: 14px;
}
.right-bar-role{
    margin-top: 16px;
    border-left:1px solid #1b1f25;
}
.right-bar-help a{
    background-position: 0px 0px;
}
.right-bar-role a{
    background-position: -32px 0px;
}





.main{
    width: 1880px;
}

/* 左侧内容 */
.left-side{
    width: 450px;
}


/* 主内容 */
.main-contain{
    width: 1410px;
}


/* 负责间隙 */
.auto{
    margin:0 auto;
}
.outter-right{
    margin-right: 20px;
}
.outter-top{
    margin-top: 20px;
}
.outter-bottom{
    margin-bottom: 10px;
}
.outter-left{
    margin-left: 20px;
}
.inner-align{
    padding:0 20px;
}
.outter-align{
    margin:0 auto;
}
.inner-top{
    padding-top: 20px;
}

.mr2{
    margin-right: 2px;
}

/* 边框 */
.border{
    border:1px solid #09496d;
}
.highlight-border{
    border:1px solid #0a5884;
}
.common-title{
    color:#00c5f6;
    font-size: 18px;
}
/* 左侧详细内容 */
/* 产用可视化内容 */
.fluctuation{
    width: 100%;
    height: 460px;
}
.fluctuation-content{
    width: 100%;
    height: 188px;
    padding: 24px;
    text-align:center;
}

.product{
    width: calc(100% / 2);
}
.product-fluctuation{
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 18px;
    font-weight: normal;
    color: #b0e9fe;
}
.fluctuation-data{
    width: 185px;
    height: 100px;
    background: url(../img/dd_bg1.png) no-repeat 5px 0;
    position: relative;
    line-height: 100px;
}
.fluctuation-data-val{
    width: 180px;
    font-size: 36px;
    color:#14be31;
}
.product-status{
    width: 28px;
    height: 28px;
    background: url(../img/circle_up.png) no-repeat;
    display: block;
    position: absolute;
    right: -11px;
    bottom: -10px;
}
.fluctuation-chart{
    width: 100%;
    height: 270px;
    padding:0 14px;
}
.fluctuation-chart-toop{
    width: 352px;
    height: 24px;
    padding-left: 12px;
    padding-top: 3px;
    margin-right:44px;
}
.press-content{
    margin-left:20px;
    margin-top:20px;
}
.press-ring{
    position: absolute;
    left:0;
    top:0;
}
.icon-tip{
    display: inline-block;
    width: 12px;
    height: 12px;
}
.icon-blue{
    background: #00c5f6;
}
.icon-red{
    background: #7c3cfe;
}
.select-time{
    width: 138px;
    height: 24px;
    text-align: center;
}
.icon-right{
    margin-right:10px;
}
#fluctuation_chart{
    width: 100%;
    height: 250px;
}
#press_bar{
    margin-top:20px;
    width: 420px;
    height: 260px;
}
.product-view{
    height: 40px;
    width: 132px;
    margin-left: 19px;
    background: url(../img/test.png);
    background-size:cover;
}

.use{
    width: calc(100% / 2);

}
.use-title{
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 18px;
    font-weight: normal;
}
.use-data{
    width: 185px;
    height: 132px;
    background: url(../img/circle_bg.png) right 0px;
    margin-bottom: 14px;
    position: relative;
    line-height: 132px;
}
.use-data-val{
    width: 132px;
    margin-left: 54px;
    font-size: 36px;
    color:#14be31;
}
.use-status{
    width: 28px;
    height: 28px;
    background: url(../img/circle_up.png) no-repeat;
    display:block;
    position: absolute;
    right:2px;
    bottom:12px;
}
.use-view{
    height: 40px;
    width: 132px;
    margin-left: 58px;
    background: url(../img/test.png);
    background-size:cover;
}

.unit{
    font-size: 18px;
    color:#b0e9fe;
}



/* 主管压力/放散 */
.pressure-title{
    height: 30px;
    line-height: 30px;

}
.pressure-content{
    width: 100%;
    height: 258px;
}

.pressure-data{
    width: 100%;
    height: 50px;
    border-bottom:1px solid #08486c;
    line-height: 50px;
    text-align: center;
}
.pressure-data-item{
    width: calc(100% / 2);
    height: 50px;
}
.pressure-data-item-border{
    border-right:1px solid #08486c;
}
.pressure-data-item-all{
    font-size: 24px;
    color:#14be31;
}
.pressure-data-item-percent{
    font-size: 24px;
    color:#fe3b2f;
}
.pressure-chart{
    width: 100%;
    height: 208px;
    padding: 10px;
}
/*  锅炉调节功率*/
.gas-title{
    height: 30px;
    line-height: 30px;
}
.boiler-power{
    width: 100%;
    height: 325px;
}
/* 主内容区 */
.main-list{
    width: 100%;
    height: 582px;
}
.main-item{
    width:calc(100% / 5);
    height: 100%;
}

.main-item-border{
    border-right:1px dashed #2d404c;
}
.main-item-data {
    width: 100%;
    height: 306px;
    background: url(../img/equipment.png) no-repeat -1128px -350px;
}
/*.main-item-normal{
    background-position:0px 0px;
}
.main-item-reduce{
    background-position:-282px 0px;
}
.main-item-mod{
    background-position:-564px 0px;
}*/
.main-item-data-border{
    border-bottom:1px solid #0b395b;
}
.main-item-data-title{
    font-size: 18px;
    color:#b0e9fe;
}
.main-item-data-content{
    width: 242px;
    height: 70px;
    border:1px solid #0b395b;
    margin-top: 168px;
    padding-top: 10px;
    padding-left: 7px;
}
.main-item-data-current{
    width: 75px;
    font-size: 12px;
    color:#b0e9fe;
}
.main-item-data-current .current-data{
    font-size: 30px;
    color:#14be31;
}
.main-item-data-prediction{
    width: 76px;
    font-size: 12px;
    color:#b0e9fe;
}
.main-item-data-prediction .prediction-data{
    font-size: 30px;
    color:#14be31;
}
.unit{
    padding-top:30px;
    font-size: 16px;
    color:#b0e9fe;
}
.main-item-chart{
    width: 100%;
    height: 276px;
    padding: 14px;

}
.broadcast{
    height: 30px;
    line-height: 30px;
}
.broadcast a{
    color:#00ccfe;
}
.broadcast-title{

}
.broadcast-content{
    width: 100%;
    height: 206px;
    position: relative;
}


/* 表格布局 */
.w320{
    width: 320px;
}
.w160{
    width: 160px;
}
.w112{
    width: 112px;
}
.title-bg{
    background: #0b3951;
}

.title-list{
    padding:2px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-bottom:1px solid #0b395b;
}

.contents{
    height: 170px;
    position: relative;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color:#b0e9fe;
    overflow:hidden;
}
.content-list{
    position: absolute;
    left:0;
    top:0;
}

.content-item{
    border-bottom:2px solid #0b395b;
}

/* 滚动条 */
.scroll-box{
    position: absolute;
    width: 5px;
    height: 170px;
    border:1px solid #134263;
    right:0;
    top: 0;
    background: #03131f;

}
.scroll-bar{
    position: absolute;
    background: #207494;
    /* height: 100px; */
    width: 2px;
    left:1px;
}
.el-progress-circle__track{
    opacity:0.1;
}
.backgroundC{
    background-color: rgba(255,0,0,0.5);
}
.achieve-poe{
    width:135px;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #b0e9fe;
    text-align: center;
    line-height:30px;
    position: relative;
    background: #0b3951;
    margin-top:2px;
}
.achiev-right{
    width: 12px;
    height: 30px;
    background: url("../img/bg_tip01.png") no-repeat 0 0;
    position: absolute;
    right:-12px;
}
.achiev-conent-right{
    width: 115px;
    height: 30px;
    font-size: 16px;
}
.achiev-right-text{
    width: 100%;
    font-size: 16px;
    color: #b0e9fe;
    padding-bottom:6px;
    border-bottom:1px solid #0b395b;
}
.font16{
    font-size: 16px;
    color: #b0e9fe;
}
.achiev-right-li{
    height:calc(100% / 3);
    width: 100%;
    padding-top:10px;
    text-align: center;
}